/*
    DashboardDemo.js
    Copyright (C) 2010, Donald W. Griffin
    All Rights Reserved
*/

var _viewport;

PartOne = Ext.extend(Wdg.Dashboard.Part,
{
    create: function (cfg)
    {
        return {
            title: "Part One",
            html: "<b>Part One</b>"
        };
    }
});

PartTwo = Ext.extend(Wdg.Dashboard.Part,
{
    create: function (cfg)
    {
        return {
            title: "Part Two",
            html: "<b>Part Two</b>"
        };
    }
});

PartThree = Ext.extend(Wdg.Dashboard.Part,
{
    create: function (cfg)
    {
        return {
            title: "Part Three",
            html: "<b>Part Three</b>"
        };
    }
});

Ext.onReady(function ()
{
    var dashboard = {
        xtype: "dashboard",
        //stateful: true,
        id: "DemoDashboard",
        dashboardState: [
            {// Column 1
                width: 200,
                items: [
                    { type: "PartOne" }
                ]
            },
            {// Column 2
                width: 150,
                items: [
                    { type: "PartTwo" },
                    { type: "PartThree" }
                ]
            },
            {// Column 3
                width: 350,
                items: [
                    { type: "PartTwo" },
                    { type: "PartThree" }
                ]
            }
        ],
        parts: {
            PartOne: new PartOne(),
            PartTwo: new PartTwo(),
            PartThree: new PartThree()
        }
    };

    dashboard.region = "center";
    _viewport = new Ext.Viewport({
        xtype: "panel",
        border: false,
        layout: "border",
        items: [
            {
                xtype: "panel",
                title: "North",
                region: "north",
                collapsible: true,
                split: true,
                height: 100
            },
            {
                xtype: "panel",
                title: "East",
                region: "east",
                collapsible: true,
                split: true,
                width: 100
            },
            dashboard,
            {
                xtype: "panel",
                title: "West",
                region: "west",
                collapsible: true,
                split: true,
                width: 100
            },
            {
                xtype: "panel",
                title: "South",
                region: "south",
                collapsible: true,
                split: true,
                height: 100
            }
        ]
    });
});
